<template>
  <div> 
    <div class="title">
        热销推荐
    </div>
    <ul>
        <!-- 1. 一开始已经引入了1px边框的解决方案，直接加border-bottom的class名字就可以用了 -->
          <router-link 
          tag="li"
          class="item border-bottom" 
          v-for="item of recommendList" 
          :key="item.id"
          :to="'/detail/'+item.id"
          >
              <img :src="item.imgUrl" alt="">
              <div class="item-info"> 
                  <p class="item-title">{{item.title}}</p>
                  <p class="item-desc">{{item.desc}}</p>
                  <button class="item-btn">查看详情</button>
              </div>
          </router-link>
    </ul>
  </div>
</template>
<script>
export default {
    name:'HomeRecommend',
     props: {
    recommendList:Array
  },
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';
  .title
    line-height .8rem
    background  #eee
    text-indent .2rem
  .item
      display flex
      height 1.9rem
      img 
        width 1.7rem
        height 1.7rem  
        margin .2rem
      .item-info
          flex:1
          min-width 0
          padding .1rem
          .item-title
              line-height .54rem
              font-size .32rem
          .item-desc
              line-height .4rem
              color #ccc
              ellipsis()
          .item-btn
              margin-top .16rem
              background #ff9300
              padding 0 .2rem
              line-height .44rem
              border-radius .06rem
              color #fff
              

</style>
